<template>
	<div class="OrderShop">
		<!--navbar-->
		<div class="shop_navbar">
			<div class="shop_navbar_item" @click="type = 1">
				<span :class="{active:type == 1}">审核通过(<span style="font-size: 1.4rem;color: #00CC00;font-weight: 500">{{count}}</span>)</span>
			</div>
			<div class="shop_navbar_item" @click="type = 2">
				<span :class="{active:type == 2}">待审核(<span style="font-size: 1.4rem;color: #FE0000;font-weight: 500">{{count2}}</span>)</span>
			</div>
		</div>
		<!--数据循环内容审核通过内容-->
		<div class="shop_container_through" v-if="type==1">
			<!--循环体-->
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getOrderShop">
				<div class="shop_container_through_cycle" v-for="(item,index) in orderShop" :key="index" @click="eventClickJumpDetails(item)">
					<!--标题-->
					<div class="stores_top_tit">
						<span>{{item.zhicheng}}</span>
					</div>
					<!--门店内容-->
					<div class="stores_top_container">
						<!--内容左侧-->
						<div class="stores_top_container_left">
							<span> <img src="../../../static/images/user-green.png" alt=""> {{item.realname}}</span>
							<span> <img src="../../../static/images/phone-green.png" alt=""> {{item.phone}}</span>
						</div>
						<!--内容右侧-->
						<div class="stores_top_container_right">
							<img src="../../../static/images/location-green-dot.png" alt="">
							<span>{{item.address}}</span>
						</div>
					</div>
				</div>
			</van-list>
		</div>
        <div class = "shop_container_through" v-if="type==2">
            <!--循环体-->
            <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了"
                      @load="getOrderShop2">
                <div class = "shop_container_through_cycle"  v-for = "(item,index) in orderShop2" :data-token="item.token"  @click="$router.push('/salesman/OrderAudit?id='+item.token)" :key = "index">
                <!--标题-->
                <div class = "stores_top_tit">
                    <span>{{item.zhicheng}}</span>
                    <span style = "font-size: 1.4rem;color: #FF0000;font-weight: 500">待审核</span>
                </div>
                <!--门店内容-->
                <div class = "stores_top_container">
                    <!--内容左侧-->
                    <div class = "stores_top_container_left">
                        <span> <img src = "../../../static/images/user-green.png" alt = ""> {{item.realname}}</span>
                        <span> <img src = "../../../static/images/phone-green.png" alt = ""> {{item.phone}}</span>
                    </div>
                    <!--内容右侧-->
                    <div class = "stores_top_container_right">
                        <img src = "../../../static/images/location-green-dot.png" alt = "">
                        <span>{{item.address}}</span>
                    </div>
                </div>
            </div>
            </van-list>
        </div>
	</div>
</template>

<script>
	import { List } from 'vant';
	export default {
		name: "TemOrderShop",
		components: {
			[List.name]: List
		},
		data() {
			return {
				type: 1, //点击切换
				page: 0,
				list_rows: 10,
				loading: false,
				finished: false,
				orderShop: [],
				count: 0,
				count2: 0,
				page2: 0,
				list_rows2: 10,
				loading2: false,
				finished2: false,
				orderShop2: [],
			}
		},
		mounted() {
            this.count2 = this.$route.query.count;
		},
		methods: {
			getOrderShop() {
				var that = this;
				var url = '/api/home/user/getlist';
				var param = {
					page: this.page,
					list_rows: this.list_rows,
					status: 2,
					token: this.$store.state.options.user.token
				};
				this.$util.postRequestInterface(url, param, (res) => {
					that.page = that.page + 1;
					if (res.data == '') {
						that.loading = false;
						that.finished = true;
					} else {
						for (let i of res.data.data) {
							that.orderShop.push({
                                id: i.id,
                                token: i.token,
								zhicheng: i.zhicheng,
								realname: i.realname,
								address: i.address,
								phone: i.phone
							});
						}
					}
					that.count = res.data.count;
					// // 加载状态结束
					that.loading = false;
					// // 数据全部加载完成
					if (that.orderShop.length >= res.data.count) {
						that.finished = true;
					}
				})
			},
			getOrderShop2() {
				var that = this;
				var url = '/api/home/user/getlist';
				var param = {
					page: this.page2,
					list_rows: this.list_rows2,
					status: 1,
					token: this.$store.state.options.user.token
				};
				this.$util.postRequestInterface(url, param, (res) => {
					that.page2 = that.page2 + 1;
					if (res.data == '') {
						that.loading2 = false;
						that.finished2 = true;
					} else {
						for (let i of res.data.data) {
							that.orderShop2.push({
								shop: i.zhicheng,
								title: i.title,
								info: i.info,
								time: that.$moment(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                                isread: i.isread,
                                token: i.token
							});
						}
					}
					that.count2 = res.data.count;
					// // 加载状态结束
					that.loading2 = false;
					// // 数据全部加载完成
					if (that.orderShop2.length >= res.data.count) {
						that.finished2 = true;
					}
				})
            },
            eventClickJumpDetails(item) {
                this.$router.push({
                    path: '/salesman/order-stores',
                    query: {
                        id: item.id, token: item.token
                    }
                });
            }
		}
	}
</script>

<style scoped lang = "scss">
	.OrderShop {
		/*navbar*/
		.shop_navbar {
			width: 100%;
			display: flex;
			margin-top: 1.7rem;

			/*里面的内容*/
			.shop_navbar_item {
				flex: 1;
				text-align: center;

				span {
					padding-bottom: 0.5rem;
				}
			}

			.active {
				border-bottom: 0.1px solid #00cc00;
			}
		}

		/*数据循环审核通过循环体大包围*/
		.shop_container_through {
			/*循环体*/
			.shop_container_through_cycle {
				/*width: 100%;*/
				margin: 1rem auto;
				border-top: 0.5rem solid #eeeeee;
				padding-left: 1rem;
				padding-right: 1rem;
				/*顶部标题*/
				.stores_top_tit {
					margin-top: 1.7rem;
					display: flex;
					justify-content: space-between;

					span {
						font-size: 1.7rem;
						color: #333333;
						font-weight: 500;
					}
				}

				/*顶部下部内容*/
				.stores_top_container {
					display: flex;
					margin-top: 1.4rem;
					/*内容左侧*/
					.stores_top_container_left {
						width: 50%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						border-right: 0.1rem solid #eeeeee;

						span {
							font-size: 1.3rem;
							color: #666666;

							img {
								width: 1.1rem;
								height: 1.2rem;
							}
						}

						span:last-child {
							margin-top: 0.8rem;
						}
					}

					/*内容右侧*/
					.stores_top_container_right {
						width: 50%;
						display: flex;
						align-items: center;

						img {
							width: 1.8rem;
							height: 1.8rem;
							margin: 0 1.2rem;
						}

						span {
							font-size: 1.3rem;
							color: #666666;
							text-wrap: initial;
						}
					}
				}
			}
		}
	}
</style>